<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮番图动画联动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box{
            position: relative;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .box_ul{
            display: flex;
            overflow: hidden;
            height: 280px;
            width: 520px;
            border: 1px solid gray;
            margin: 50px auto;
            animation: move 15s linear infinite;
        }
       @keyframes move {
           0%{
               background:url("img/1.jpg") no-repeat ;
               background-size: 100% 100%;
           }
           25%{
               background:url("img/2.jpg") no-repeat ;
               background-size: 100% 100%;
           }
           50%{
               background:url("img/3.jpg") no-repeat ;
               background-size: 100% 100%;
           }
           75%{
               background:url("img/4.jpg") no-repeat ;
               background-size: 100% 100%;
           }
           100%{
               background:url("img/5.jpg") no-repeat;
               background-size: 100% 100%;
           }
       }
       .box_ul2 li {
           position: relative;
           left: 535px;
           top: -95px;
           float: left;
           height: 10px;
           width: 10px;
           border: 1px solid red;
           border-radius: 50%;
           margin-left: 5px;
       }
        .box_ul2 li:hover{
            background-color: #f25807;
        }

    </style>
</head>
<body>
<div class="box">

    <ul class="box_ul">
        <li id="f1"><a href="" ></a></li>
        <li id="f2"><a href="" ></a></li>
        <li id="f3"><a href="" ></a></li>
        <li id="f4"><a href="" ></a></li>
        <li id="f5"><a href="" ></a></li>
    </ul>>
   <!-- <ul class="box_ul2">
        <li><a href="#f1"></a></li>
        <li><a href="#f2"></a></li>
        <li><a href="#f3"></a></li>
        <li><a href="#f4"></a></li>
        <li><a href="#f5"></a></li>
    </ul> -->

</div>
</body>
</html>